<template>
  <div class="page">
    <a href="/cover"
       class="left_up_logo">
      <img alt="" src="../../public/littleStation/back.png" style="max-width: 50px">
    </a>
    <div class="a">
      <a href="">首页</a>
      <a href="#hh">计算机</a>

      <div class="dropdown">
        <button class="dropbtn">芯片</button>
        <div class="dropdown-content">
          <a href="https://blog.csdn.net/weixin_29062823/article/details/115477027?ops_request_misc=%257B%252
                  2request%255Fid%2522%253A%2522165140601316782425181784%2522%252C%2522scm%2522%253A%252220140713.
                  130102334.pc%255Fall.%2522%257D&request_id=165140601316782425181784&biz_id=0&utm_medium=distribute.
                  pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-2-115477027.142^v9^pc_search_result_cache,157^v4^control&utm_term=">模拟芯片</a>
          <a href="https://blog.csdn.net/iteye_17686/article/details/81602544?ops_request_misc=%257B%2522request%255Fid%25
                  2%253A%2522165140604716782425113176%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&requ
                  est_id=165140604716782425113176&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecp
                  m_v1~rank_v31_ecpm-1-81602544.142^v9^pc_search_result_cache,157^v4^control&utm_term=">数字芯片</a>
          <a href="https://blog.csdn.net/weixin_43343190/article/details/82961013">通用芯片</a>
          <a href="https://blog.csdn.net/weixin_44790215/article/details/117382495?ops_request_misc
                  =%257B%2522request%255Fid%2522%253A%2522165140515116782425167899%2522%252C%2522scm%2522%253A%25222
                  0140713.130102334.pc%255Fall.%2522%257D&request_id=165140515116782425167899&biz_id=0&utm_medium=dist
                  ribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-3-117382495.142^v9^pc_s
                  earch_result_cache,157^v4^control&utm_term=">专用芯片</a>
        </div>
      </div>

      <div class="dropdown">
        <button class="dropbtn">系统</button>
        <div class="dropdown-content">
          <a href="#hh">LINUX</a>
          <a href="#hh">WINDOWS</a>
          <a href="#hh">MACOS</a>
          <a href="#hh">UNIX</a>
        </div>
      </div>
      <a href="https://blog.csdn.net/k331922164/article/details/46730523?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165140654916780366571830%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=165140654916780366571830&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-2-46730523.142^v9^pc_search_result_cache,157^v4^control&utm_term=">软硬件</a>
      <div class="dropdown">
        <button class="dropbtn">社区</button>
        <div class="dropdown-content">
          <a href="https://www.csdn.net/?spm=1001.2101.3001.4476">CSDN</a>
          <a href="https://www.oschina.net/">OSCHINA</a>
          <a href="https://www.iteye.com/">ITEye</a>
        </div>
      </div>
    </div>
    <div class="kin"><img src="../../public/history/1.jpg" width="1200" height="435"></div>

    <div class="mider clearfix">
      <div class="mider-1"><h2>机器的组成</h2>
        <p>计算机是由硬件系统（hardware system）和软件系统（software system）两部分组成的。</p></div>
      <div class="mider-2"><h2>历史上的今天</h2>
        <p>快来跟我一起看看计算机历史上的今天发生了哪些事情吧！想知道更多精彩的故事，点击历史上的今天即可查看！</p></div>
      <div class="mider-3"><h2>软件系统</h2>
        <p>所谓软件是指为方便使用计算机和提高使用效率而组织的程序以及用于开发、使用和维护的有关文档。软件系统可分为系统软件和应用软件两大类。</p></div>
    </div>

    <ul>
      <li>
        <img src="../../public/history/201.jpg" alt="">
        <div class="mask">
          <h1>电子管计算机</h1>
          <p>硬件方面，逻辑元件采用的是真空电子管，主存储器采用汞延迟线、
            阴极射线示波管静电存储器、磁鼓、磁芯；外存储器采用的是磁带。软件方面采用的是机器语言、汇编语言。</p>
        </div>
      </li>
      <li>
        <img src="../../public/history/202.jpg" alt="">
        <div class="mask">
          <h1>晶体管计算机</h1>
          <p>硬件方的操作系统、高级语言及其编译程序。应用领域以科学计算和事务处理为主，并开始进入工业控制领域。</p>
        </div>
      </li>
      <li>
        <img src="../../public/history/203.jpg" alt="">
        <div class="mask">
          <h1>中小规模集成电路计算机</h1>
          <p>硬件方面，逻辑元件采用中、小规模集成电路，主存储器仍采用磁芯。
            软件方面出现了分时操作系统以及结构化、规模化程序设计方法。</p>
        </div>
      </li>
      <li>
        <img src="../../public/history/204.jpg" alt="">
        <div class="mask">
          <h1>大规模和超大规模集成电路计算机</h1>
          <p>硬件方面，逻辑元件采用大规模和超大规模集成电路（LSI和VLSI）。软件方面出现了数据库管理系统、
            网络管理系统和面向对象语言等。</p>
        </div>
      </li>
    </ul>

    <div class="kider clearfix" id="hh">
      <div class="kider-1"><h2>计算机发展历史</h2>
        <p>
          计算机（computer）俗称电脑，是一种用于高速计算的电子计算机器，可以进行数值计算，又可以进行逻辑计算，还具有存储记忆功能。是能够按照程序运行，自动、高速处理海量数据的现代化智能电子设备。由硬件系统和软件系统所组成，没有安装任何软件的计算机称为裸机。可分为超级计算机、工业控制计算机、网络计算机、个人计算机、嵌入式计算机五类，较先进的计算机有生物计算机、光子计算机、量子计算机等。</p>
        计算机发明者约翰·冯·诺依曼。计算机是20世纪最先进的科学技术发明之一，对人类的生产活动和社会活动产生了极其重要的影响，并以强大的生命力飞速发展。它的应用领域从最初的军事科研应用扩展到社会的各个领域，已形成了规模巨大的计算机产业，带动了全球范围的技术进步，由此引发了深刻的社会变革，计算机已遍及一般学校、企事业单位，进入寻常百姓家，成为信息社会中必不可少的工具。
      </div>
      <div class="kider-2"><img src="../../public/history/11.png" width="282px" height="450px"></div>
      <div class="kider-3"><h1>约翰·冯·诺伊曼</h1>
        <p>冯·诺依曼（John von
          Neumann，1903~1957），20世纪最重要的数学家之一，在现代计算机、博弈论、核武器和生化武器等诸多领域内有杰出建树的最伟大的科学全才之一，被后人称为“计算机之父”和“博弈论之父”。

          原籍匈牙利。布达佩斯大学数学博士。先后执教于柏林大学和汉堡大学。1930年前往美国，后入美国籍。历任普林斯顿大学、普林斯顿高级研究所教授，美国原子能委员会会员。美国全国科学院院士。早期以算子理论、共振论、量子理论、集合论等方面的研究闻名，开创了冯·诺依曼代数。第二次世界大战期间为第一颗原子弹的研制作出了贡献。为研制电子数字计算机提供了基础性的方案。1944年与摩根斯特恩（Oskar
          Morgenstern）合著《博弈论与经济行为》，是博弈论学科的奠基性著作。晚年，研究自动机理论，著有对人脑和计算机系统进行精确分析的著作《计算机与人脑》。

          主要著作有《量子力学的数学基础》（1926）、《计算机与人脑》（1958）、《经典力学的算子方法》、《博弈论与经济行为》（1944）、《连续几何》（1960）等。</p></div>
    </div>

    <div class="lider" id="hw">
      <div class="lider-1"><h2>计算机发展历史</h2>
        <p>1946年2月14日，由美国军方定制的世界上第一台电子计算机“电子数字积分计算机”（ENIAC Electronic Numerical And
          Calculator）在美国宾夕法尼亚大学问世了。ENIAC（中文名：埃尼阿克）是美国奥伯丁武器试验场为了满足计算弹道需要而研制成的，这台计算器使用了17840支电子管，大小为80英尺×8英尺，重达28t（吨），
          功耗为170kW，其运算速度为每秒5000次的加法运算，造价约为487000美元。ENIAC的问世具有划时代的意义，
          表明电子计算机时代的到来。在以后60多年里，计算机技术以惊人的速度发展，没有任何一门技术的性能价格比能在30年内增长6个数量级。</p>
      </div>
      <div class="lider-2"><h2>
        第1代：电子管数字机（1946—1958年）</h2>
        <p>硬件方面，逻辑元件采用的是真空电子管，主存储器采用汞延迟线、阴极射线示波管静电存储器、磁鼓、磁芯；外存储器采用的是磁带。软件方面采用的是机器语言、汇编语言。应用领域以军事和科学计算为主。</p>
        <p>特点是体积大、功耗高、可靠性差。速度慢（一般为每秒数千次至数万次）、价格昂贵，但为以后的计算机发展奠定了基础。</p></div>
      <div class="lider-3"><h2>第2代：晶体管数字机（1958—1964年）</h2>
        <p>
          硬件方的操作系统、高级语言及其编译程序。应用领域以科学计算和事务处理为主，并开始进入工业控制领域。特点是体积缩小、能耗降低、可靠性提高、运算速度提高（一般为每秒数10万次，可高达300万次）、性能比第1代计算机有很大的提高。</p>
        <h2>第3代：集成电路数字机（1964—1970年）</h2>
        <p>硬件方面，逻辑元件采用中、小规模集成电路（MSI、SSI），主存储器仍采用磁芯。软件方面出现了分时操作系统以及结构化、规模化程序设计方法。
          特点是速度更快（一般为每秒数百万次至数千万次），而且可靠性有了显著提高，价格进一步下降，产品走向了通用化、系列化和标准化等。应用领域开始进入文字处理和图形图像处理领域。</p>
      </div>
      <div class="lider-4" id="dp"><h2>第4代：大规模集成电路机（1970年至今）</h2>
        <p>硬件方面，逻辑元件采用大规模和超大规模集成电路（LSI和VLSI）。软件方面出现了数据库管理系统、网络管理系统和面向对象语言等。
          特点是1971年世界上第一台微处理器在美国硅谷诞生，开创了微型计算机的新时代。应用领域从科学计算、事务管理、过程控制逐步走向家庭。</p>
        <p>
          由于集成技术的发展，半导体芯片的集成度更高，每块芯片可容纳数万乃至数百万个晶体管，并且可以把运算器和控制器都集中在一个芯片上、从而出现了微处理器，并且可以用微处理器和大规模、超大规模集成电路组装成微型计算机，就是我们常说的微电脑或PC机。微型计算机体积小，价格便宜，使用方便，但它的功能和运算速度已经达到甚至超过了过去的大型计算机。另一方面，利用大规模、超大规模集成电路制造的各种逻辑芯片，已经制成了体积并不很大，但运算速度可达一亿甚至几十亿次的巨型计算机。我国继1983年研制成功每秒运算一亿次的银河Ⅰ这型巨型机以后，
          又于1993年研制成功每秒运算十亿次的银河Ⅱ型通用并行巨型计算机。这一时期还产生了新一代的程序设计语言以及数据库管理系统和网络软件等</p>
        <p>
          随着物理元、器件的变化，不仅计算机主机经历了更新换代，它的外部设备也在不断地变革。比如外存储器，由最初的阴极射线显示管发展到磁芯、磁鼓，以后又发展为通用的磁盘，现又出现了体积更小、容量更大、速度更快的只读光盘（CD—ROM）。</p>
      </div>

      <div class="lider-5"><h2>特别篇：（第五代）具有人工智能的新一代计算机</h2>
        <p>第五代计算机指具有人工智能的新一代计算机，它具有推理、联想、判断、决策、学习等功能。计算机的发展将在什么时候进入第五代?什么是第五代计算机?对于这样的问题，
          已经有一个明确统一的说法了。</p>
        <p>IBM发表声明称，该公司已经研制出一款能够模拟人脑神经元、突触功能以及其他脑功能的微芯片，从而完成计算功能，这是模拟人脑芯片领域所取得的又一大进展。
          IBM表示，这款微芯片擅长完成模式识别和物体分类等繁琐任务，而且功耗还远低于传统硬件。</p>
        <p>
          值得注意的是，它并非想要用新的芯片取代原有的计算机芯片。IBM在其网站上介绍，传统的计算机关注语言和分析思考，而神经突触核心能够解决感知和形状识别的问题，它们分别像人类的左脑和右脑一样;而IBM接下来想要做的，就是让"左脑"和"右脑"连接起来合作，形成一种新的"整体计算智能"。从这个说法上来看，传统的芯片擅长大量的符号运算和数字处理，而神经突触核心的优势在于多感官和实时传感器数据处理。比如，Modha曾经表示，团队正在开发一种头戴设备，能够帮助盲人感知外部环境;而这一次IBM称，经过实验测试，
          这种芯片可以在录像片段中检测人、汽车、卡车和公共汽车，并识别出了它们。这其实就是依靠神经突触核心来完成的。</p>
        <p>
          但有一点可以肯定，在现在的智能社会中，计算机、网络、通信技术会三位一体化。新世纪的计算机将把人从重复、枯燥的信息处理中解脱出来，从而改变我们的工作、生活和学习方式，给人类和社会拓展了更大的生存和发展空间。当历史的车轮不断前行时，我们会面对各种各样的未来计算机。</p>
      </div>

    </div>
    <div class="fixtools">
      <a href="#"><span class="glyphicon glyphicon-chevron-up"></span><br>顶部</a>
      <a href="#"><span class="glyphicon glyphicon-chevron-up"></span><br>顶部</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "history"
}
</script>

<style scoped>
.left_up_logo {
  border-bottom: 0;
  position: fixed;
  left: 0;
  text-decoration: none;
  top: 0;
  z-index: 1;
}

body {
  margin: 0;
  background-color: #bebcbc;
  display: flex;
  justify-content: center;
}

.page {
  width: 1200px;
  height: 270px;
  margin: auto;
  background-color: #777f88;
}

.a {
  position: relative;
  top: 0px;
  display: flex;
  justify-content: center;
  background-color: rgb(24, 24, 26);

}

.a a {
  width: 150px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  color: lavenderblush;
}

.dropbtn {
  background-color: rgb(24, 24, 26);
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* 容器 <div> - 需要定位下拉内容 */
.dropdown {
  position: relative;
  display: inline-block;
}

/* 下拉内容 (默认隐藏) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

/* 下拉菜单的链接 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {
  background-color: #f1f1f1
}

/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
  display: block;
}

/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}


.mider {
  background-color: rgb(155, 151, 155);
  margin-top: 5px;

}

.mider .mider-1 {
  width: 380px;
  height: 150px;
  /*background-color: chartreuse;*/
  float: left;
  margin-left: 20px;
}

.mider .mider-2 {
  width: 380px;
  height: 150px;
  /*background-color: coral;*/
  float: left;
  margin: 0px 20px;
}

.mider .mider-3 {
  width: 380px;
  height: 150px;
  /*background-color: rgb(108, 22, 207);*/
  float: left;
}

/*清除浮动*/
.clearfix::after {
  content: "";
  display: block;
  clear: both;
  background-color: crimson;
}


ul {

  width: 1120px;

  /* 去除无序列表默认的小圆点 */

  list-style: none;

  /* 弹性布局 让元素均匀排列 */

  display: flex;

  justify-content: space-around;


}

ul li {

  /* 相对定位 */

  position: relative;

  width: 270px;

  height: 270px;

  overflow: hidden;

  margin: 0 10px;

}

ul li:hover {

  cursor: pointer;

}

img {

  width: 100%;

  height: 100%;

}

.mask {

  /* 绝对定位 */

  position: absolute;

  top: 100%;

  height: 100%;

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  background: #464646e8;

  color: #fff;

  /* 添加过渡 */

  transition: all .7s ease-out;

}

ul li:hover .mask {

  top: 0;

}

.mask h1 {

  line-height: 50px;

}

.mask p {

  padding: 20px;

  font-weight: 500;

  word-break: break-all;

}


/**/
.kider {
  background-color: beige;
  margin-top: 5px;
  height: 450px;

}

.kider .kider-1 {
  width: 380px;
  height: 450px;
  /*background-color: chartreuse;*/
  background-color: rgb(99, 98, 96);
  float: left;
  margin-right: 30px;
}

.kider .kider-2 {
  width: 282px;
  height: 450px;
  /*background-color: coral;*/
  background-color: rgb(99, 98, 96);
  float: left;
}

.kider .kider-3 {
  width: 478px;
  height: 450px;
  background-color: rgb(99, 98, 96);
  /*background-color: rgb(108, 22, 207);*/
  float: right;
  margin-left: 30px;
}

/*清除浮动*/
.clearfix::after {
  content: "";
  display: block;
  clear: both;
  background-color: crimson;
}


.lider {
  width: 1200px;
  height: 800px;
  background-color: rgb(99, 98, 96);
  margin-bottom: 100px;
}

.lider .lider-1 {
  width: 1200px;
  height: 160px;
  background-color: rgb(99, 98, 96);
  margin-bottom: 15px;
}

.lider .lider-2 {
  width: 1200px;
  height: 150px;
  background-color: rgb(99, 98, 96);
  margin-bottom: 15px;
}

.lider .lider-3 {
  width: 1200px;
  height: 250px;
  background-color: rgb(99, 98, 96);
  margin-bottom: 15px;
}

.lider .lider-4 {
  width: 1200px;
  height: 280px;
  background-color: rgb(99, 98, 96);
  margin-bottom: 15px;
}

.lider .lider-5 {
  width: 1200px;
  height: 320px;
  background-color: rgb(99, 98, 96);
  margin-bottom: 500px;
}

.yiem {
  margin-top: 445px;

}

.fixtools {
  position: fixed;
  top: 40%;
  right: 18%;
  width: 40px;
}

.fixtools a:first-child {
  border-radius: 10px 10px 0 0;
}

.fixtools a:last-child {
  border-radius: 0 0 10px 10px;
}

.fixtools a {
  display: block;
  float: left;
  border: 1px solid black;
  background-color: #ddc9c9;
  text-align: center;
  color: #e62b2b;
}

.fixtools a:hover {
  background: orange;
}

.item a {
  float: left;
  margin: 5px 55px;
}

.item img {
  width: 140px;
}

.item h6 {
  width: 160px;
  overflow: hidden;
}


</style>
